<template>
    <div style="position:relative;">
        <Menu :theme="theme3" active-name="1" width="250px" @on-select = "handletopbar">
            <MenuItem name="tradingsystem_1">
                <Icon type="document-text"></Icon>
                交易记录
            </MenuItem>
            <MenuItem name="decision_1">
                <Icon type="chatbubbles"></Icon>
                决策信息
            </MenuItem>
			<MenuItem name="hedginginfo_1">
				<Icon type="heart"></Icon>
				交易对信息
			</MenuItem>
			<!--<MenuItem name="hedgingsetting_1">
				<Icon type="heart-broken"></Icon>
				交易对配置
			</MenuItem>-->
        </Menu>
        <div class="routercontent">
            <transition name="slide-right" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            theme3:'light'
        }
    },
    methods:{
        handletopbar:function(name){
            if(name){
                this.$router.push({name:name});
            }
        },
    }
}
</script>
<style scoped>
    .routercontent{
        position: absolute;
        width: 100%;
        padding-left: 260px;
        top:0px;
        background: #f7f7f7;
    }
    .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(50px, 0);
        transform: translate(50px, 0);
    }
    .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-50px, 0);
        transform: translate(-50px, 0);
    }
</style>
